<template>
  <div class="max-box set-padding">
    <!-- 头部搜索、操作 -->
    <div class="header-box">
      <div class="header-left">
        <span>计划</span>
      </div>
      <!-- <a-input-search
          placeholder="输入计划标题"
          @search="getTableList"
          v-model="planTitle"
          allow-clear
          class="search-box"
        >
          <a-button slot="enterButton" icon="search"></a-button>
        </a-input-search> -->
      <a-button type="primary" class="add-btn" @click="openTopDrawer"
        >添加新计划</a-button
      >
    </div>
    <!-- 内容区 -->
    <div class="content-box">
      <!-- 标签页 -->
      <div class="content-head">
        <span>添加计划可周期性生成工单</span>
      </div>
      <!-- 表格内容 -->
      <div class="table-box" ref="yHeight">
        <!-- 表格 -->
        <myTable
          :columns="columns"
          :dataSource="tableData"
          :total="total"
          @changePagination="getTableList"
          :scroll="{ x: 200, y: yHeight }"
        >
          <template #planDetail="slotData">
            <div @click="toDetail(slotData.scope)" class="detail-box">
              {{ slotData.scope.planName }}
            </div>
          </template>
          <template slot="operation" slot-scope="slotData">
            <div class="operation-box">
              <a-icon type="edit" title="编辑" @click="edit(slotData.scope)" />
              <a-icon
                type="delete"
                class="icon-left"
                title="删除"
                @click="deletePlan(slotData.scope)"
              />
            </div>
          </template>
        </myTable>
      </div>
    </div>

    <!-- 添加计划 -->
    <a-drawer
      placement="top"
      :closable="false"
      :visible="addVisible"
      height="100%"
      wrapClassName="add-power"
      @close="closeTopDrawer"
      :destroyOnClose="true"
      :headerStyle="{
        background: '#f0f1f5',
        padding: '0 0.2rem 0 0.3rem',
        flexGrow: 0,
      }"
      :bodyStyle="{
        padding: '0.3rem 0 0 0',
        flexGrow: 1,
      }"
      :drawerStyle="{
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <template #title>
        <div class="head-box">
          <span>添加新计划</span>
          <div class="head-btn">
            <a-button @click="closeTopDrawer">取消</a-button>
            <a-button type="primary" class="save-btn" @click="savePlan"
              >保存</a-button
            >
          </div>
        </div>
      </template>
      <div class="content-box">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <div class="content-width">
            <div class="show-row">
              <a-form-model-item label="计划标题" prop="planName" required>
                <a-input v-model="form.planName" class="input-width"></a-input>
              </a-form-model-item>
              <div class="form-time">
                <div class="deal-time">
                  <span>*</span>
                  计划处理时间：
                  <a-popover>
                    <template slot="content">
                      <div>该时间为第一个工单计划开始和结束的时间，</div>
                      <div>第一个工单一般提前开始时间24小时生成，</div>
                      <div>
                        如果该时间在未来24小时内，那么在提交计划后的1分钟内立刻生成第一个工单。
                      </div>
                    </template>
                    <a-icon type="question-circle" class="icon-tit" />
                  </a-popover>
                </div>
                <div class="time-content">
                  <a-form-model-item prop="startEnd">
                    <a-range-picker v-model="form.startEnd" />
                  </a-form-model-item>
                  <a-form-model-item prop="repeatType">
                    <myDrop
                      :dropdownList="frequencyList"
                      :defaultFlag.sync="form.repeatType"
                      class="ml-16"
                    ></myDrop>
                  </a-form-model-item>
                  <a-form-model-item prop="repeatCount">
                    <div class="repeats-box">
                      <span>重复次数</span>
                      <a-input v-model="form.repeatCount"></a-input>
                    </div>
                  </a-form-model-item>
                </div>
              </div>
              <a-form-model-item label="工单模板" prop="templateId" required>
                <div class="model-box">
                  <template v-if="form.templateId">
                    <div class="member-box">
                      <div class="station-text">
                        {{ templateName }}
                      </div>
                      <a-icon
                        type="close"
                        class="close-icon"
                        @click="deleteTemplate"
                      />
                    </div>
                  </template>
                  <div
                    class="add-btn"
                    @click="$refs.TemplateModal.openModal()"
                    v-else
                  >
                    <a-icon type="plus" />
                    工单模板
                  </div>
                </div>
              </a-form-model-item>
            </div>

            <a-row class="row-model" v-if="form.templateId">
              <a-col :span="16">
                <div class="model-left">
                  <a-form-model-item label="标题" prop="taskName" required>
                    <a-input v-model="form.taskName"></a-input>
                  </a-form-model-item>
                  <a-form-model-item label="优先级" prop="priority" required>
                    <myDrop
                      :dropdownList="priorityList"
                      :defaultFlag.sync="form.priority"
                      class="priority-box"
                    ></myDrop>
                  </a-form-model-item>
                  <a-form-model-item label="电站" prop="stationId" required>
                    <div class="model-box add-width">
                      <template v-if="form.stationId">
                        <div class="member-box">
                          <div class="station-text">
                            {{ stationName }}
                          </div>
                          <a-icon
                            type="close"
                            class="close-icon"
                            @click="deleteStation"
                          />
                        </div>
                      </template>
                      <div
                        class="add-btn"
                        @click="$refs.StationModal.openModal()"
                      >
                        <a-icon type="plus" />
                        电站
                      </div>
                    </div>
                  </a-form-model-item>

                  <template v-if="taskType == 2">
                    <a-form-model-item label="设备" prop="deviceId" required>
                      <div class="model-box add-width">
                        <template v-if="form.deviceId">
                          <div class="member-box">
                            <div class="station-text">
                              {{ deviceName }}
                            </div>
                            <a-icon
                              type="close"
                              class="close-icon"
                              @click="deleteDevice"
                            />
                          </div>
                        </template>
                        <div class="add-btn" @click="openDevice">
                          <a-icon type="plus" />
                          设备
                        </div>
                      </div>
                    </a-form-model-item>
                    <a-form-model-item label="报警" prop="alarmId" required>
                      <div class="model-box add-width">
                        <div
                          class="add-btn"
                          @click="$refs.PoliceModal.openModal()"
                        >
                          <a-icon type="plus" />
                          报警
                        </div>
                      </div>
                    </a-form-model-item>
                  </template>

                  <a-form-model-item label="描述" prop="planDesc" required>
                    <a-textarea
                      v-model="form.planDesc"
                      class="describe-box"
                      :autosize="false"
                    />
                  </a-form-model-item>
                  <a-form-model-item label="图片描述" prop="imgDescribe">
                    <a-upload
                      list-type="picture-card"
                      :file-list="fileList"
                      :before-upload="uploadCheck"
                      :customRequest="ownUpload"
                    >
                      <div v-if="fileList.length < 8">
                        <a-icon type="plus" />
                      </div>
                    </a-upload>
                  </a-form-model-item>
                </div>
              </a-col>
              <a-col :span="8" class="right-col">
                <div class="model-right">
                  <div>流程：</div>
                  <div class="flow-box">
                    <div>
                      <a-form-model-item
                        label="处理人"
                        prop="handleUser"
                        required
                      >
                        <div class="usermsg-box" v-if="form.handleUser">
                          <div class="avatar-box">
                            <img
                              src="../../assets/workOrder.svg"
                              alt=""
                              class="ava"
                            />
                            <div
                              class="delete-box"
                              @click="deleteUser('handleUser')"
                            >
                              <a-icon type="close" />
                            </div>
                          </div>
                          <div class="user-name">{{ handleUserName }}</div>
                        </div>
                        <div class="placeholder" v-else>请选择处理人</div>
                      </a-form-model-item>
                    </div>
                    <div
                      class="icon-box"
                      v-if="!form.handleUser"
                      @click="handleUserOpen('handleUser')"
                    >
                      <a-icon type="plus-circle" />
                    </div>
                  </div>
                  <div class="flow-box">
                    <div>
                      <a-form-model-item
                        label="验证人"
                        prop="verifyUser"
                        required
                      >
                        <div class="usermsg-box" v-if="form.verifyUser">
                          <div class="avatar-box">
                            <img
                              src="../../assets/workOrder.svg"
                              alt=""
                              class="ava"
                            />
                            <div
                              class="delete-box"
                              @click="deleteUser('verifyUser')"
                            >
                              <a-icon type="close" />
                            </div>
                          </div>
                          <div class="user-name">{{ verifyUserName }}</div>
                        </div>
                        <div class="placeholder" v-else>请选择验证人</div>
                      </a-form-model-item>
                    </div>
                    <div
                      class="icon-box"
                      v-if="!form.verifyUser"
                      @click="handleUserOpen('verifyUser')"
                    >
                      <a-icon type="plus-circle" />
                    </div>
                  </div>
                  <div class="flow-box no-after">
                    <div>
                      <a-form-model-item
                        label="评价人"
                        prop="evaluateUser"
                        required
                      >
                        <div class="usermsg-box" v-if="form.evaluateUser">
                          <div class="avatar-box">
                            <img
                              src="../../assets/workOrder.svg"
                              alt=""
                              class="ava"
                            />
                            <div
                              class="delete-box"
                              @click="deleteUser('evaluateUser')"
                            >
                              <a-icon type="close" />
                            </div>
                          </div>
                          <div class="user-name">{{ evaluateUserName }}</div>
                        </div>
                        <div class="placeholder" v-else>请选择评价人</div>
                      </a-form-model-item>
                    </div>
                    <div
                      class="icon-box"
                      v-if="!form.evaluateUser"
                      @click="handleUserOpen('evaluateUser')"
                    >
                      <a-icon type="plus-circle" />
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-form-model>
      </div>
    </a-drawer>
    <TemplateModal
      @onSubmit="templateSubmit"
      ref="TemplateModal"
      :id.sync="form.templateId"
    ></TemplateModal>
    <!-- 设备选择弹窗 -->
    <DeviceModal
      ref="DeviceModal"
      :stationId="form.stationId"
      :id.sync="form.deviceId"
      @onSubmit="deviceSubmit"
    ></DeviceModal>
    <StationModal
      ref="StationModal"
      :id.sync="form.stationId"
      @onSubmit="stationSubmit"
    ></StationModal>
    <!-- 报警选择弹窗 -->
    <PoliceModal
      ref="PoliceModal"
      :deviceSn="deviceSn"
      :id.sync="form.alarmId"
    ></PoliceModal>
    <!-- 成员选择弹窗 -->
    <MemberModal ref="MemberModal" @onSubmit="changeMember"></MemberModal>

    <!-- 计划详情 -->
    <planDetailPage
      :id="planId"
      :addVisible.sync="detailVisible"
      @detailEdit="detailEdit"
      @detailDelete="detailDelete"
    ></planDetailPage>
  </div>
</template>
<script>
import moment from "moment";
import {
  planList,
  addPlan,
  planDetail,
  planUpadate,
  planDelete,
} from "@/api/plan.js";
import { upLoadFile } from "@/api/publicApi";
import { debound } from "@/utils/index.js";
// import echartConfig from "./config/alarmEchart";
import planDetailPage from "./components/planDetail.vue";
export default {
  data() {
    return {
      planTitle: "",
      yHeight: 0,
      tabList: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "发生中",
        },
        {
          value: "2",
          label: "已恢复",
        },
      ],
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          width: 70,
          customRender: (text, record, index) => {
            return index + 1;
          },
          fixed: "left",
          align: "center",
        },
        {
          title: "计划标题",
          dataIndex: "planName",
          scopedSlots: {
            customRender: "planDetail",
          },
          width: 120,
        },
        {
          title: "工单模板",
          width: 120,
          dataIndex: "taskTemplateName",
        },
        {
          title: "计划首次处理时间",
          dataIndex: "planHandlerStartTime",
          width: 130,
        },
        {
          title: "重复方式",
          width: 120,
        },
        {
          title: "重复次数",
          width: 120,
          dataIndex: "repeatCount",
        },
        {
          title: "已生成",
          width: 120,
        },
        {
          title: "下次生成时间",
          width: 120,
        },
        {
          title: "最后更新",
          width: 120,
          dataIndex: "planHandlerEndTime",
        },

        {
          title: "最后更新人",
          width: 120,
        },
        {
          title: "操作",
          scopedSlots: {
            customRender: "operation",
          },
          width: 120,
        },
      ],
      tableData: [],
      total: 0,
      moment,
      addVisible: false,
      form: {
        planName: "",
        startEnd: [],
        repeatType: "1",
        repeatCount: 5,
        taskName: "",
        priority: "2",
        stationId: "",
        planDesc: "",
        deviceId: "",
        alarmId: "",
        templateId: "",
        handleUser: "", //处理人ID
        verifyUser: "", //验证人ID
        evaluateUser: "", //评价人ID
      },
      rules: {
        planName: [
          {
            required: true,
            message: "请填写计划标题",
            trigger: "blur",
          },
        ],
        taskName: [
          {
            required: true,
            message: "请填写标题",
            trigger: "blur",
          },
        ],
        startEnd: [
          {
            required: true,
            message: "请选择时间",
            trigger: ["blur", "change"],
          },
        ],
        repeatCount: [
          {
            required: true,
            message: "请填写次数",
            trigger: ["blur", "change"],
          },
        ],
        stationId: [
          {
            required: true,
            message: "请选择电站",
            trigger: ["blur", "change"],
          },
        ],
        planDesc: [
          {
            required: true,
            message: "请填写描述",
            trigger: ["blur", "change"],
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请选择设备",
            trigger: ["blur", "change"],
          },
        ],
        alarmId: [
          {
            required: true,
            message: "请选择报警",
            trigger: ["blur", "change"],
          },
        ],
        templateId: [
          {
            required: true,
            message: "请选择工单模板",
            trigger: ["blur", "change"],
          },
        ],
        evaluateUser: [
          {
            required: true,
            message: "请选择评价人",
            trigger: ["blur", "change"],
          },
        ],
        verifyUser: [
          {
            required: true,
            message: "请选择验证人",
            trigger: ["blur", "change"],
          },
        ],
        handleUser: [
          {
            required: true,
            message: "请选择处理人",
            trigger: ["blur", "change"],
          },
        ],
      },
      deviceName: "",
      templateName: "",
      stationName: "",
      taskType: "",
      deviceSn: "",
      handleUserName: "",
      verifyUserName: "",
      evaluateUserName: "",

      //计划处理频次
      frequencyList: [
        { label: "每天", value: "1" },
        { label: "每周日", value: "2" },
        { label: "每月", value: "3" },
      ],

      // 优先级
      priorityList: [
        { label: "较低", value: "1" },
        { label: "普通", value: "2" },
        { label: "紧急", value: "3" },
        { label: "非常紧急", value: "4" },
      ],
      fileList: [],
      currentUser: "",
      planId: "",
      detailVisible: false,
    };
  },
  components: { planDetailPage },
  methods: {
    openTopDrawer() {
      this.addVisible = true;
      this.$nextTick(() => {
        this.resetModal();
      });
    },
    changeTab(value) {
      this.activeTab = value;
      this.getTableList();
    },
    // 获取表格数据
    getTableList(pageMsg) {
      let requestPage = {
        page: 1,
        limit: 50,
        planName: this.planTitle,
        stationId: this.$route.query.id,
      };
      requestPage.stationId || delete requestPage.stationId;
      requestPage.planName || delete requestPage.planName;
      if (pageMsg?.page) {
        requestPage.page = pageMsg.page;
        requestPage.limit = pageMsg.pageSize;
      }
      planList({ ...requestPage }).then((res) => {
        this.tableData = res.data;
        this.total = res.count;
      });
    },
    closeTopDrawer() {
      this.resetModal();
      this.addVisible = false;
    },
    savePlan() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const requestData = JSON.parse(JSON.stringify(this.form));
          requestData.planHandlerStartTime = moment(
            requestData.startEnd[0]
          ).format("YYYY-MM-DD HH:mm:ss");
          requestData.planHandlerEndTime = moment(
            requestData.startEnd[1]
          ).format("YYYY-MM-DD HH:mm:ss");
          delete requestData.startEnd;
          if (this.taskType == 1) {
            delete requestData.deviceId;
            delete requestData.alarmId;
          }
          let requestApi = this.form.id ? planUpadate : addPlan;
          requestApi(requestData).then((res) => {
            this.$message.success(`${this.form.id ? "修改" : "添加"}计划成功`);
            this.getTableList();
            this.resetModal();
            this.addVisible = false;
          });
        }
      });
    },
    resetModal() {
      for (let k in this.form) {
        if (k == "startEnd") {
          this.form[k] = [];
        } else if (k == "repeatType") {
          this.form[k] = 1;
        } else if (k == "repeatCount") {
          this.form[k] = 5;
        } else if (k == "priority") {
          this.form[k] = 2;
        } else {
          this.form[k] = "";
        }
      }
      this.taskType = "";
      this.deviceName = "";
      this.templateName = "";
      this.stationName = "";
      this.deviceSn = "";
      this.handleUserName = "";
      this.verifyUserName = "";
      this.evaluateUserName = "";
      this.form.id && delete this.form.id;
    },
    uploadCheck(file, fileList) {
      const imgType = ["image/gif", "image/jpeg", "image/pjpeg", "image/png"];
      if (imgType.includes(file.type)) {
        return true;
      } else {
        this.$message.warning("请上传jpeg、png、gif类型的图片");
        return false;
      }
    },
    ownUpload(file) {
      const formdata = {
        multipartFiles: file.file,
      };
      upLoadFile(formdata).then((res) => {
        console.log(res);
      });
    },
    templateSubmit(e) {
      this.taskType = e.taskType;
      this.templateName = e.taskName;
    },
    deleteTemplate() {
      this.taskType = "";
      this.templateName = "";
      this.form.templateId = "";
    },
    stationSubmit(e) {
      this.stationName = e.stationName;
    },
    deleteStation() {
      this.stationName = "";
      this.form.stationId = "";
    },
    openDevice() {
      if (!this.form.stationId) {
        return this.$message.warning("请先选择电站");
      }
      this.$refs.DeviceModal.openModal();
    },
    deviceSubmit(e) {
      this.deviceName = e.deviceTitle;
      this.deviceSn = e.deviceSn;
    },
    deleteDevice() {
      this.deviceName = "";
      this.form.deviceId = "";
    },
    handleUserOpen(current) {
      this.currentUser = current;
      this.$refs.MemberModal.openModal();
    },
    changeMember(e) {
      this.form[this.currentUser] = e.id;
      this[this.currentUser + "Name"] = e.name;
    },
    deleteUser(name) {
      this[name + "Name"] = "";
      this.form[name] = "";
    },
    edit(row) {
      // console.log(row);
      planDetail({ id: row.id }).then((res) => {
        console.log(res);
        this.addVisible = true;
        for (let k in this.form) {
          for (let r in res.data) {
            if (k == r) {
              this.form[k] = res.data[r];
            }
          }
        }
        this.form.startEnd = [
          moment(res.data.planHandlerStartTime),
          moment(res.data.planHandlerEndTime),
        ];
        this.form.id = res.data.id;
        this.templateName = res.data.taskTemplateName;
      });
    },
    deletePlan(row) {
      // planName
      this.$confirm({
        title: `确认删除${row.planName}?`,
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          console.log("OK");
          planDelete({ id: row.id }).then((res) => {
            this.$message.success("删除成功");
            this.getTableList();
          });
        },
        onCancel: () => {
          console.log("Cancel");
        },
      });
    },

    // 计划详情
    toDetail(row) {
      this.planId = row.id;
      this.detailVisible = true;
    },

    // 抽屉删除
    detailDelete(row) {
      this.deletePlan(row);
    },
    // 抽屉编辑
    detailEdit(row) {
      this.edit(row);
    },
    watchResize() {
      this.yHeight = this.$refs["yHeight"].clientHeight - 100;
      window.addEventListener("resize", this.screenResize);
    },
    screenResize: debound(function () {
      // document.documentElement.clientHeight;

      this.yHeight = this.$refs["yHeight"].clientHeight - 100;
    }, 200),
  },
  mounted() {
    this.watchResize();
    if (this.$route.path == "/station/plan") {
      this.$nextTick(() => {
        document.getElementsByClassName("set-padding")[0].style.paddingLeft =
          "16px";
        document.getElementsByClassName("set-padding")[0].style.paddingRight =
          "16px";
        document.getElementsByClassName("set-padding")[0].style.paddingBottom =
          "10px";
      });
    }
    this.getTableList();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.screenResize);
  },
  computed: {},
};
</script>
    <style lang="less" scoped>
.max-box {
  width: 100%;
  padding-top: 16px;
  padding-right: 20px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
    .search-box {
      width: 240px;
      height: 32px;
      /deep/.ant-input {
        font-size: 12px;
      }
    }
    .add-btn {
      font-size: 12px;
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    // tabs
    .content-head {
      display: flex;
      padding: 16px;

      align-items: center;
      span {
        font-size: 14px;
        margin-right: 16px;
      }
    }
    .table-box {
      min-height: 220px;
      flex-grow: 1;
      .name-box {
        cursor: pointer;
      }
    }
    .detail-box {
      cursor: pointer;
    }
    // 操作样式
    .operation-box {
      width: 100%;
      padding-left: 15px;
      font-size: 16px;
      i {
        cursor: pointer;
        transition: all 0.5s;
        &:hover {
          color: #048fff;
        }
      }
      .icon-left {
        margin-left: 30px;
      }
    }
  }
}
/deep/.screen-drawer {
  .ant-drawer-content-wrapper {
    height: 200px !important;
  }
}
.add-power {
  .head-box {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 20px;
      color: #252b3a;
    }
    .head-btn {
      .ant-btn {
        height: 32px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    .ant-input {
      height: 32px;
    }
    .ant-form {
      height: 100%;
    }
    .content-width {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;

      /deep/.ant-form-item {
        margin-bottom: 24px;
        /deep/.ant-form-item-label {
          font-size: 12px;
        }
      }
      .show-row {
        flex-grow: 0;
        .form-time {
          .ant-input {
            height: 32px;
          }
          .deal-time {
            margin-bottom: 10px;
            span {
              color: #f5222d;
            }
          }
          .time-content {
            display: flex;
            .ant-btn {
              height: 32px;
              width: 160px;
            }
            /deep/.ant-calendar-picker-input {
              height: 32px;
              line-height: 1;
            }
            .repeats-box {
              display: flex;
              align-items: center;
              margin-left: 10px;
              span {
                font-size: 12px;
                margin-right: 4px;
              }
              .ant-input {
                width: 80px;
              }
            }
          }
        }
        .input-width {
          width: 64.5%;
        }
      }
      .model-box {
        width: 64.5%;
        height: 32px;
        padding: 2px 32px 2px 12px;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
        display: flex;
        align-items: center;
        .member-box {
          height: 22px;
          padding: 0 8px;
          border-radius: 2px;
          background-color: rgba(0, 0, 0, 0.04);
          display: flex;
          align-items: center;
          margin-right: 16px;
          .station-text {
            max-width: 480px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 12px;
          }
          .close-icon {
            font-size: 12px;
            margin-left: 12px;
            cursor: pointer;
            &:hover {
              color: #ff7875;
            }
          }
        }
        .add-btn {
          font-size: 12px;
          color: #048fff;
          display: flex;
          align-items: center;
          cursor: pointer;
          height: max-content;
        }
      }
      .row-model {
        flex-grow: 1;
        overflow: hidden;
        .ant-col {
          height: 100%;
        }
        .model-left {
          border-right: 1px solid rgba(0, 0, 0, 0.08);
          padding-right: 16px;
          // height: 205px;
          height: 100%;
          overflow-y: auto;
          .priority-box {
            width: 100%;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .add-width {
            width: 100%;
          }
          .describe-box {
            height: 120px;
          }
        }
        .right-col {
          padding: 0 8px;
          .model-right {
            padding-left: 16px;
            .flow-box {
              display: flex;
              justify-content: space-between;
              padding: 0 24px;
              box-sizing: border-box;
              position: relative;
              .usermsg-box {
                padding: 12px 12px 0 16px;
                .avatar-box {
                  width: 32px;
                  height: 32px;
                  position: relative;
                  .ava {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                  }
                  .delete-box {
                    position: absolute;
                    top: -4px;
                    right: -4px;
                    width: 16px;
                    height: 16px;
                    color: #fff;
                    background-color: grey;
                    border-radius: 50%;
                    box-shadow: 0 0 1px 2px #fff;
                    font-size: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.3s;
                    cursor: pointer;
                    &:hover {
                      background: #ff7875;
                      transform: rotate(90deg);
                    }
                  }
                }
                .user-name {
                  font-size: 12px;
                  margin-top: 6px;
                  line-height: normal;
                }
              }

              // overflow: hidden;
              &::before {
                background: #b3b3b3;
                width: 8px;
                height: 8px;
                content: "";
                display: block;
                position: absolute;
                border-radius: 50%;
                left: 8px;
                top: 20px;
              }
              &::after {
                background: rgba(0, 0, 0, 0.08);
                width: 1px;
                height: 100%;
                content: "";
                display: block;
                position: absolute;
                border-radius: 1px;
                left: 12px;
                top: 24px;
              }
              .placeholder {
                color: #00000073;
                font-size: 14px;
                margin-left: 14px;
              }
              .icon-box {
                i {
                  font-size: 24px;
                  color: #048fff;
                  cursor: pointer;
                  margin-top: 12px;
                }
              }
            }
            .no-after {
              &::after {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
      